<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>绝对定位的参照系</title>
    <style type="text/css">
      body {
        width: 960px;
        margin: 0 auto;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 18px;
        line-height: 1.8em;
      }

      div {
        width: 400px;
        float: left;
        margin: 0 20px 0 0;
      }

      .absolute {
        position: absolute;
        left: 50px;
      }

      .bg {
        background-color: #fcc;
      }

      code {
        background-color: #ccc;
        height: 50px;
        line-height: 50px;
        display: block;
      }
    </style>
  </head>

  <body>
    <div>
      <h2>以 body 为参照</h2>
      <p>我就是简单的实验一下以body元素为参照系的实验，快乐的小树枝</p>
      <p>我微笑着看你在那里耍着那根快乐来的小树枝。</p>
      <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
      <p>
        也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"
      </p>
      <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
      <code>.absolute { position: absolute; left:50px;} </code>
    </div>
    <div>
      <!-- 代码对比，在所在容器的父元素当中添加相对定位的relative元素实现 -->
      <div style="position:relative">
        <h2>以父元素为参照</h2>
        <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
        <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
        <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
        <p>
          也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"
        </p>
        <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
        <code>.absolute { position: absolute; left:50px;} </code>
      </div>
    </div>
  </body>
</html>
